<template>
  <div>
    <TitleComponent mainTitle="首页轮播图" />
    <avue-crud
      :option="crudData.Listoption"
      :data="crudData.data"
      v-model:page="crudData.page"
      @on-load="onLoad"
    >
      <template #menu="{ row, index, size }">
        <el-dropdown @command="(command) => editRow(command, row)">
          <el-icon><More /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit">编辑</el-dropdown-item>
              <el-dropdown-item command="delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
      <template #isPublished="{ row, prop }">
        <span>{{ row.isPublished ? "已发布" : "未发布" }} </span>
      </template>
    </avue-crud>

    <el-dialog
      v-model="centerDialogVisible"
      title="编辑轮播图"
      width="600"
      destroy-on-close
      center
    >
      <avue-form :option="formOption" v-model="formData"></avue-form>
    </el-dialog>
  </div>
</template>
    
  <script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import TitleComponent from "@/components/title/index.vue";

const centerDialogVisible = ref(false);
const formData = ref({});
const formOption = reactive({
  column: [
    { label: "编号", prop: "id", type: "number", span: 24 },
    {
      label: "图片",
      prop: "image",
      type: "upload",
      listType: "picture-img",
      span: 24,
    },
    { label: "排序", prop: "sortOrder", type: "number", span: 24 },
    { label: "是否发布", prop: "isPublished", type: "switch", span: 24 },
    {
      label: "创建时间",
      prop: "createdAt",
      type: "datetime",
      span: 24,
      disabled: true,
    },
    {
      label: "更新时间",
      prop: "updatedAt",
      type: "datetime",
      span: 24,
      disabled: true,
    },
  ],
});

const crudData = reactive({
  page: {
    pageSize: 20,
    total: 0,
  },
  Listoption: {
    menu: false,
    delBtn: false,
    editBtn: false,
    selection: true,
    excelBtn: true,
    border: true,
    index: true,
    headerAlign: "center",
    align: "center",
    labelWidth: 100,
    tip: false,
    refreshBtn: true,
    columnBtn: false,
    searchShowBtn: false,
    column: [
      { label: "编号", prop: "id", sortable: true },
      { label: "图片", prop: "image", type: "img", spna: 24 },
      { label: "排序", prop: "sortOrder", sortable: true },
      { label: "是否发布", prop: "isPublished", type: "switch" },
      { label: "创建时间", prop: "createdAt", type: "datetime" },
      {
        label: "更新时间",
        prop: "updatedAt",
        type: "datetime",
        sortable: true,
      },
      { label: "操作", prop: "menu", width: 60, slot: true },
    ],
  },
  data: [
    {
      id: 1,
      image: "https://jumptra.vip/uploads/images/photo_2022-12-25_19-31-20.jpg",
      sortOrder: 1,
      isPublished: true,
      createdAt: "2024-07-01 08:00:00",
      updatedAt: "2024-07-05 09:00:00",
    },
    {
      id: 2,
      image: "https://jumptra.vip/uploads/images/photo_2022-12-25_19-31-20.jpg",
      sortOrder: 2,
      isPublished: false,
      createdAt: "2024-07-02 08:00:00",
      updatedAt: "2024-07-05 09:00:00",
    },
  ],
});

const onLoad = (page) => {
  crudData.page.total = crudData.data.length; // 使用写死的数据时，设置总数
};

const editRow = (command, row) => {
  if (command === "edit") {
    formData.value = { ...row };
    centerDialogVisible.value = true;
  } else if (command === "delete") {
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        const index = crudData.data.findIndex((item) => item.id === row.id);
        if (index !== -1) {
          crudData.data.splice(index, 1);
          ElMessage.success("删除成功");
          crudData.page.total = crudData.data.length;
        }
      })
      .catch(() => {});
  }
};

// 初始加载数据
onMounted(() => {
  onLoad({ currentPage: 1, pageSize: crudData.page.pageSize });
});
</script>
      
  <style scoped lang="scss">
/* 样式... */
</style>
  